<template>
  <div class="home">
    <div class="big">
  <div class="login">
    <h2 style="text-align: center; padding: 10px 0;">OA系统登录</h2>
<!-- 表单 -->
    <el-form ref="form" :model="form" label-width="80px" :rules="rules" >
  <el-form-item prop="username">
    <el-input v-model="form.username" class="txt" style="width: 280px; border-radius:2px;" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="form.password" class="txt" style="width: 280px; border-radius:2px;" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
    <a href="#" style="font-size: 10px; color:orange; margin-left: 230px;text-decoration:none;"  @click="dialogFormVisible= true"> 忘记密码?</a>
  </el-form-item>
  <el-form-item prop="yzm">
    <el-input v-model="form.yzm" class="txt" style="width: 160px; border-radius:2px;"  placeholder="验证码"></el-input>
    <el-button style="border-radius: 10px;margin-left: 20px; color: #ccc;">验证码图片</el-button>
  </el-form-item>

  <el-form-item >
    <el-button type="primary" @click="dl" style="width: 250px; margin-left: 20px; border-radius: 10px; border: 0; background-color: rgb(205, 167, 241); font-size: 20px;">登录</el-button>
  </el-form-item>
</el-form>
    </div>
    <!-- 弹出框忘记密码 -->
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible"
    :modal-append-to-body="false">
    <!-- 这个让黑色莫泰框压下去 -->
  <el-form :model="form1" >
    <el-form-item label="用户名" :label-width="formLabelWidth">
      <el-input v-model="form1.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="新密码" :label-width="formLabelWidth">
      <el-input v-model="form1.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="再次输入" :label-width="formLabelWidth">
      <el-input v-model="form1.agine" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
<!-- 底部 -->
    <p class="zi">©️2022美团版权所有京ICP证070791号京公网安备11010502025545号</p>
    </div>
  
  </div>
</template>

<script>
// @ is an alias to /src
import axios from 'axios'
export default {
 data() {
  return {
     rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
           { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 4, max: 8, message: '长度在 4 到 8 个字符', trigger: 'blur' }
          ],
          yzm: [
           { required: true, message: '请输入验证码', trigger: 'blur' },
          ],
        },

     form: {
          username: '',
          password:'',
          yzm:'',
        },
         dialogFormVisible:false,
    form1: {
        username:'',
        password:'',
        agine:'',
        },
        formLabelWidth: '120px',
  }
 },

 methods: {
    dl() {
      axios.post('/effect/user/login',this.form).then(res=>{
      console.log(res);
      this.$router.push('/sy')
      })
      }
 },
}
</script>
<style  scoped>
html,body{
padding: 0;
margin: 0;
height: 100%;
  }
   .home{
   padding: 0;
   margin: 0;
   position: fixed;
   height:100%;
   width: 100%;
   background-image: url('../assets/back.png');
   background-size: 100% 100%;
   }
   .big{
   width: 100%;
   height: 100%;
   position: relative;
   }
   .login{
    padding: 10px 10px;
    width: 474px;
    height: 406px;
    border-radius: 7%;
    background-color: white;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
   }
   .txt /deep/ .el-input__inner {
    border-radius: 0.64rem !important;
  }
  .zi{
  font-size: 10px;
  color: rgb(146, 145, 145);
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
  }

 
</style>